<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码生成器</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        #text-input {
            margin: 10px;
            padding: 10px;
            font-size: 16px;
            width: 300px;
        }

        #interval-input {
            margin: 10px;
            padding: 10px;
            font-size: 16px;
            width: 300px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            margin: 10px;
        }

        #qr-code {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <input type="text" id="text-input" placeholder="输入字符串">
    <input type="number" id="interval-input" placeholder="输入时间间隔（毫秒）">
    <button onclick="startDisplayingText()">开始显示文本</button>
    <div id="qr-code"></div>

    <script>
        let textArray = [];
        let currentTextIndex = 0;

        function generateQRCode(text) {
            var qrCodeDiv = document.getElementById('qr-code');
            qrCodeDiv.innerHTML = ''; // 清空之前的二维码

            // 使用jQuery QRCode插件生成二维码
            $(qrCodeDiv).qrcode({
                level: 'L',
                text: encodeURIComponent(text),
                width: 500,
                height: 500
            });
        }

        function splitTextIntoChunks(text, chunkSize) {
            let textArray = [];
            for (let i = 0; i < text.length; i += chunkSize) {
                textArray.push(text.substring(i, i + chunkSize));
            }
            return textArray;
        }

        function startDisplayingText() {
            let inputText = document.getElementById('text-input').value;
            let intervalInput = document.getElementById('interval-input').value;

            if (inputText.length >100) {
                textArray = splitTextIntoChunks(inputText, 100);
            } else {
                textArray = [inputText];
            }

            if (intervalInput) {
                let interval = parseInt(intervalInput, 10);
                displayTextInChunks(interval);
            } else {
                alert('请输入一个有效的时间间隔');
            }
        }

        function displayTextInChunks(interval) {
            if (currentTextIndex < textArray.length) {
                generateQRCode(textArray[currentTextIndex]);
                currentTextIndex++;
                setTimeout(displayTextInChunks, interval, interval);
            } else {
                currentTextIndex = 0; // 重置索引以便重新开始
            }
        }
    </script>
</body>
</html>